<template>
  <div id="register-login">
    <a class="logo" href="/"></a>

    <div class="section-wrapper">
      <div class="account-form">
        <h1>登录到 Trello</h1>
        <form id="register-form" method="POST" @submit.prevent="handleLogin">
          <div>
            <label
              ><input
                v-model.lazy="user.name"
                class="form-field"
                autofocus="autofocus"
                placeholder="输入用户名"
            /></label>
          </div>
          <div>
            <label
              ><input
                v-model.lazy="user.password"
                type="password"
                class="form-field"
                placeholder="输入密码"
            /></label>
          </div>
          <div>
            <input type="submit" class="btn btn-success" value="登录" />
            <span class="signin-signup-separator">或者</span>
            <router-link :to="{ name: 'Register' }" tag="button" class="btn"
              >注册</router-link
            >
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "",
        password: "",
      },
    };
  },

  methods: {
    async handleLogin() {
      //	验证用户名是否为空，以及两次密码的密码是否一致
      if (this.user.name.trim() === "" || this.user.password.trim() === "") {
        this.$message.error("用户名和密码不能为为空");
        return;
      }

      try {
        await this.$store.dispatch("user/login", { ...this.user });
        this.$message.success("登录成功");

        setTimeout(() => {
          this.$router.push({ name: "Home" });
        }, 1000);
      } catch (e) {
        return;
      }
    },
  },
};
</script>

<style></style>
